//webpack 基于node
const path=require('path');
const HtmlWebpackPlugin =require('html-webpack-plugin')
module.exports={
    devServer: { //开发服务器的配置
        port:8000,
        host:'0.0.0.0',
        overlay:{
            errors:true, //编译过程中如果有任何错误，都会显示到页面上
        },
        // open:true 自动帮你打开浏览器
        hot:true
    },
    mode: "development",  // 模式 默认两种 production development
    entry:'./src/index.js',  //入口
    output:{
        filename: "index.js?v=[hash:8]", //打包后的文件
        path: path.resolve(__dirname,'build'), //路径必须是一个绝对路径
    },
    plugins: [  //数组  存放webpack的插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',//文件路径
            filename: "index.html",
            minify:{
                removeAttributeQuotes:true,
                collapseWhitespace:true,
            },
            // hash:true

        })
    ],
    module: {  //模块
        //loader
        rules:[ //规则  css-loader  支持@import语法
            //style-loader 他是把css 插入到head的标签里
            //loader 特点 希望单一  用法 一个用字符串 多个用[]
            //{test:/\.css$/,use:'css-loader'}
            //loader加载顺序 默认是从右往左 从下往上
            {test:/\.css$/,use:['style-loader','css-loader']},
            //loader可以用对象的方式
            // {test:/\.css$/,
            // use:[{
            //     loader: "style-loader",
            //     options:{
            //         insertAt:'top'
            //     }
            // },'css-loader']}

        ]
    }
}
